﻿$(function () {
    $("#userpanel-menulist > li:eq(3)").addClass("sel");

    layui.use("table", function () {
        var table = layui.table;
        var laydate = layui.laydate;

        //日期区间选择器初始化
        laydate.render({
            elem: '#query-laydate-area',
            type: 'date',
            range: '~',
            theme: '#ffa10d',
            format: 'yyyy-MM-dd',
        });

        //统计-年份选择器初始化
        laydate.render({
            elem: "#chart-selyear",
            type: "year",
            theme: "#ffa10d",
            format: "yyyy年",
            min: "2021",
            value: new Date().format("yyyy年"),
            max: new Date().format("yyyy"),
            change: function (value, date) {
                var value = $("#chart-selyear").val().replace("年", '');
                tjoption.title.text = value + "年度夺宝支出统计";
                tjoption.series[0].data = tjdts[value];
                mychart.setOption(tjoption);
            }
        })

        //获取表数据
        var tboptions = {
            elem: "#billtable",
            page: true,
            resize: false,
            url: "/userinfo/billdefdata",
            limit: 10,
            limits: [10, 20, 30],
            cols: [[
                { type: "numbers", title: "编号" },
                { field: 'Id', align: "center", title: "ID", hide: true },
                { field: 'Date', align: "center", title: "交易时间", sort: true },
                { field: 'Way', align: "center", title: "交易途径" },
                { field: 'Dire', align: "center", title: "支入/支出", sort: true, templet: "#tpl_dire" },
                { field: 'Quota', align: "center", title: "金额", sort: true, templet: "#tpl_quota" }
            ]]
        };
        table.render(tboptions);


        //获取统计数据
        var mychart = echarts.init(document.getElementById("chart-year"));

        var tjoption = {
            title: {
                text: '2021年度夺宝支出统计',
            },
            tooltip: {},
            legend: {
                data: ['夺宝支出']
            },
            xAxis: {
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "11月", "12月"]
            },
            yAxis: {},
            series: [
                {
                    name: '夺宝支出',
                    type: 'bar',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    label: {
                        show: true,
                        position: 'top',
                        formatter: "{c} 元"
                    },
                    itemStyle: {
                        color: "#ff3366",
                        width: "10px"
                    },
                }
            ]
        };

        mychart.setOption(tjoption);
        var tjdts = []; //每个年份的数据
        $.getJSON("/userinfo/statisticalyear", function (data) {
            for (var i = 0; i < data.length; i++) {
                var kv = data[i];
                tjdts[kv.year] = kv.datas;
            }
            var nowyear = new Date().getFullYear();
            var data = tjdts[nowyear];
            tjoption.series[0].data = data;
            mychart.setOption(tjoption);
        });

        $("#query-form").ajaxForm({
            dataType: "json",
            success: function (data) {
                tboptions.url = "";
                tboptions.data = data;
                table.render(tboptions);
                $(".orderdet .tip-def").hide();
            }
        });
    });
});